<template>
    <div id="olmap"></div>
</template>
<script setup lang="ts">
import { TK } from '@/utils/tk';
import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import TileLayer from 'ol/layer/Tile.js';
import View from 'ol/View.js';
import WMTS from 'ol/source/WMTS.js';
import WMTSTileGrid from 'ol/tilegrid/WMTS.js';
import { nextTick, onMounted, withDefaults, defineProps } from 'vue';
import { get as getProjection } from 'ol/proj.js';
import { getTopLeft, getWidth } from 'ol/extent.js';
let olMap: any = null;
const props = withDefaults(defineProps<{
    mapLoaded?: Function | null,
}>(), {
    mapLoaded: null,
})
function setCenter(center: number[] = [103.986633, 30.74848]) {
    olMap.getView().setCenter(center);
}

//创建图层(WMTS方式)
function crtLayerWMTS(
    type: any = 'img_c',
    proj: any = 'EPSG:4326',
    opacity: any = 1,
) {
    var projection: any = getProjection(proj)
    var projectionExtent = projection.getExtent()
    var size = getWidth(projectionExtent) / 256
    var resolutions = new Array(19)
    var matrixIds = new Array(19)
    for (var z = 1; z < 19; ++z) {
        // generate resolutions and matrixIds arrays for this WMTS
        resolutions[z] = size / Math.pow(2, z)
        matrixIds[z] = z
    }

    var layer = new TileLayer({
        opacity: opacity,
        source: new WMTS({
            url:
                'http://t{0-7}' + '.tianditu.com/' +
                type +
                '/wmts?tk=' + TK,
            layer: type.substr(0, 3),
            matrixSet: type.substring(4),
            format: 'tiles',
            projection: projection,
            tileGrid: new WMTSTileGrid({
                origin: getTopLeft(projectionExtent),
                resolutions: resolutions,
                matrixIds: matrixIds
            }),
            style: 'default',
            wrapX: true
        })
    })
    //layer.id = type
    return layer
}
interface Ilonlat {
    lng: number, lat: number
}

function WGS84ToMercator(lonlat: Ilonlat) {
    const coord = {
        lat: 0,
        lng: 0
    };
    const earthRad = 6378137.0; //地球半径
    coord.lat = lonlat.lng * Math.PI / 180 * earthRad;
    const param = lonlat.lat * Math.PI / 180;
    coord.lng = earthRad / 2 * Math.log((1.0 + Math.sin(param)) / (1.0 - Math.sin(param)));
    return coord;
}

function mercatorToWGS84(lonlat: Ilonlat) {
    const coord = {
        lat: 0,
        lng: 0
    };
    const lat = lonlat.lat / 20037508.34 * 180;
    let lng = lonlat.lng / 20037508.34 * 180;
    lng = 180 / Math.PI * (2 * Math.atan(Math.exp(lng * Math.PI / 180)) - Math.PI / 2);
    coord.lat = lat;
    coord.lng = lng;
    return coord;
}


onMounted(() => {
    nextTick(() => {
        olMap = new Map({
            layers: [
                crtLayerWMTS(), crtLayerWMTS('cva_c')
            ],
            target: 'olmap',
            view: new View({
                projection: getProjection('EPSG:4326') as any,
                center: [103.986633, 30.74848],
                zoom: 16,
            }),
        });
        olMap.on('loadend', () => {
            console.log('loadend');
            props.mapLoaded?.(olMap);
        })
        olMap.on('singleclick', (e:any) => {
            console.log(e.coordinate);
            //props.mapLoaded?.(olMap);
        })
        
    })
})
defineExpose({ crtLayerWMTS, setCenter, WGS84ToMercator, mercatorToWGS84 })
</script>
<style>
#olmap {
    width: 100vw;
    height: 100vh;
}
</style>